//
//** Aside Left
//
@mixin m-build-aside-left-base($layout) {
	//== Base markup
	.m-aside-left {
		@include transition(array-get($layout, self, minimize, transition));
		width: array-get($layout, self, default, width);
		&.m-aside-left--skin-dark {
			background-color: array-get($layout, self, default, bg-color, dark);
		}
		&.m-aside-left--skin-light {
			background-color: array-get($layout, self, default, bg-color, light);
		}
	} //== Default Offcanvas Mode
	.m-aside-left.m-aside-left-offcanvas-default {
		.m-aside-left {
			top: array-get($m-config-header, header, layout, self, default, height, desktop) !important;
		}
		.m-body {
			padding-left: 0 !important;
		}
	} //== Hide Mode
	.m-aside-left--hide {
		.m-aside-left {
			width: 0;
			overflow: hidden;
		}
		.m-body {
			padding-left: 0 !important;
		}
	}
	@include desktop {
		.m-aside-left--minimize {
			.m-aside-left {
				width: array-get($layout, self, minimize, width);
				@include transition(array-get($layout, self, minimize, transition));
			}
		}
		.m-aside-left--fixed {
			// aside left
			.m-aside-left {
				top: 0;
				bottom: 0;
				position: fixed;
				height: auto !important;
				left: 0;
				z-index: array-get($layout, self, fixed, zindex);
				@include fix-fixed-position-lags();
				.mCSB_scrollTools {
					right: array-get($layout, self, fixed, scroller, right);
				}
				.mCustomScrollBox,
				.mCSB_container {
					overflow: visible !important;
				} //== Custome custom scroller
				&.m-aside-left--skin-dark {
					@include m-component--scrollable-skin(array-get($layout, self, fixed, scroller, color, dark, default), array-get($layout, self, fixed, scroller, color, dark, drag));
				}
				&.m-aside-left--skin-light {
					@include m-component--scrollable-skin(array-get($layout, self, fixed, scroller, color, light, default), array-get($layout, self, fixed, scroller, color, light, drag));
				}
			}
			&.m-page--wide {
				.m-aside-left {
					left: auto;
				}
			} // fixed header
			&.m-header--static,
			&.m-header--fixed {
				.m-aside-left {
					top: array-get($m-config-header, header, default, height, desktop);
				}
			} // fixed and hidable header's hidden mode
			&.m-header--fixed.m-header--fixed-hidable.m-header--hide {
				.m-aside-left {
					@include transition(array-get($m-config-header, header, fixed, hidable, transition-hide));
					top: array-get($m-config-header, header, fixed, minimize, height, desktop);
				}
			} // fixed and hidable header's shown mode
			&.m-header--fixed.m-header--fixed-hidable.m-header--show {
				.m-aside-left {
					@include transition(array-get($m-config-header, header, fixed, hidable, transition-show));
					top: array-get($m-config-header, header, fixed, minimize, height, desktop);
				}
			} // body on fixed aside mode
			.m-body {
				@include transition(array-get($layout, self, minimize, transition));
				padding-left: array-get($layout, self, default, width);
			} // wide layout mode
			&.m-page--wide.m-aside-left--fixed {
				.m-body {
					padding-left: 0;
				}
			}
			&.m-aside-left--minimize {
				.m-body {
					@include transition(array-get($layout, self, minimize, transition));
					padding-left: array-get($layout, self, minimize, width);
				}
			} // boxed layout
			&.m-page--boxed {
				.m-aside-left {
					left: auto;
					margin-left: -(array-get($layout, self, default, width));
				}
				&.m-aside-left--minimize {
					.m-aside-left {
						margin-left: -($m-aside-left-width-minimize);
					}
				}
			}
		}
	}
	@include tablet-and-mobile {
		.m-aside-left.m-aside-left-offcanvas-default {
			.m-aside-left {
				top: 0 !important;
			}
		}
		.m-aside-left {
			padding-top: 10px;
		}
	}
}

//== Build Aside Left Base
@include m-build-aside-left-base( array-get($m-config-aside, aside-left));
//== Build Aside Left Offcanvas
@include m-generate-component--offcanvas(m-aside-left, tablet-and-mobile, array-get($m-config-aside, aside-left, self, offcanvas, tablet-and-mobile));
//@include m-generate-component--offcanvas(m-aside-left--offcanvas-default, default, array-get($m-config-aside, aside-left, self, offcanvas, default) );